import {ActionType, EditableProTable, ProColumns, ProFormInstance, useRefFunction} from "@ant-design/pro-components";
import {useRef, useState} from "react";
import {useAccess, useIntl} from "umi";

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

type DataSourceType = {
  id: React.Key;
  title?: string;
  decs?: string;
  state?: string;
  created_at?: string;
  update_at?: string;
  children?: DataSourceType[];
};

const defaultData: DataSourceType[] = [
  {
    id: 624748504,
    title: '活动名称一',
    decs: '这个活动真好玩',
    state: 'open',
    created_at: '1590486176000',
    update_at: '1590486176000',
    children: [
      {
        id: 6246912293,
        title: '活动名称二',
        decs: '这个活动真好玩',
        state: 'closed',
        created_at: '1590481162000',
        update_at: '1590481162000',
      },
    ],
  },
  {
    id: 624691229,
    title: '活动名称二',
    decs: '这个活动真好玩',
    state: 'closed',
    created_at: '1590481162000',
    update_at: '1590481162000',
  },
];

const loopDataSourceFilter = (
  data: readonly DataSourceType[],
  id: React.Key | undefined,
): DataSourceType[] => {
  return data
    .map((item) => {
      if (item.id !== id) {
        if (item.children) {
          const newChildren = loopDataSourceFilter(item.children, id);
          return {
            ...item,
            children: newChildren.length > 0 ? newChildren : undefined,
          };
        }
        return item;
      }
      return null;
    })
    .filter(Boolean) as DataSourceType[];
};

const DataServiceWeb: React.FC = () => {
  const intl = useIntl();
  const access = useAccess();
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<DataSourceType[]>(() => defaultData);

  const removeRow = useRefFunction((record: DataSourceType) => {
    setDataSource(loopDataSourceFilter(dataSource, record.id));
  });

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '活动名称',
      dataIndex: 'title',
      formItemProps: (form, {rowIndex}) => {
        return {
          rules: rowIndex > 2 ? [{required: true, message: '此项为必填项'}] : [],
        };
      },
      editable: (text, record, index) => {
        return true
      },
      width: '30%',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      valueType: 'select',
      valueEnum: {
        all: {text: '全部', status: 'Default'},
        open: {
          text: '未解决',
          status: 'Error',
        },
        closed: {
          text: '已解决',
          status: 'Success',
        },
      },
    },
    {
      title: '描述',
      dataIndex: 'decs',
      fieldProps: (form, {rowKey, rowIndex}) => {
        if (form.getFieldValue([rowKey || '', 'title']) === '不好玩') {
          return {
            disabled: true,
          };
        }
        if (rowIndex > 9) {
          return {
            disabled: true,
          };
        }
        return {};
      },
    },
    {
      title: '活动时间',
      dataIndex: 'created_at',
      valueType: 'date',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => [
        <a key="editable" onClick={() => action?.startEditable?.(record.id)}>编辑</a>,
        <a key="delete" onClick={() => removeRow(record)}>删除</a>,
      ],
    },
  ];


  return (
    <EditableProTable<DataSourceType>
      rowKey="id"
      actionRef={actionRef}
      formRef={formRef}
      columns={columns}
      value={dataSource}

      headerTitle="可编辑表格"
      scroll={{x: 960}}
      maxLength={5}
      expandable={{defaultExpandAllRows: true}}
      onChange={setDataSource}
      recordCreatorProps={{
        position: 'bottom',
        newRecordType: 'dataSource',
        parentKey: () => 624748504,
        record: () => ({id: (Math.random() * 1000000).toFixed(0)}),
      }}
      editable={{
        type: 'multiple',
        editableKeys,
        onSave: async (rowKey, data, row) => {
          console.log(rowKey, data, row);
          await waitTime(2000);
        },
        onChange: setEditableRowKeys,
      }}
    />
  );
}

export default DataServiceWeb;
